<template>
  <div>
    <V-CommonHeaderLeft>
      <div id="app">
        <el-row>
          <!-- 头部 -->
          <div class="header">
            <el-col :span="3" class="header-nav">
              <router-link to="/">首页&nbsp;&nbsp;/</router-link>
              <router-link to="/">营销&nbsp;&nbsp;/</router-link>
              <router-link to="/">促销详情</router-link>
            </el-col>
            <el-col :span="1" :offset="20" class="header-img">
              <!-- <img src="" alt=""> -->
            </el-col>
          </div>
        </el-row>
        <div class="contents">
          <div class="contents-header">
            <el-autocomplete
              class="inline-input"
              v-model="state2"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-autocomplete>
            <el-select v-model="valueT" placeholder="请选择客户类型" class="contents-select">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select v-model="value" placeholder="请选择所属区域" class="contents-select">
              <el-option
                v-for="item in optionsAdr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <p class="contents-header-search" @click="search()">高级搜索</p>
            <div class="router">
              <router-link to="/">导出</router-link>
              <router-link to="/">导入</router-link>
              <router-link to="/">新增</router-link>
            </div>
            <div class="tanSearch" v-show="showTan">
              <h3>高级搜索</h3>
              <el-row class="tanSearchRow1">
                <el-col :span="2" :offset="1" style="margin-top:10px;">客户名称</el-col>
                <el-col :span="4">
                  <el-input
                    v-model="inputCus"
                    placeholder="请输入客户名称"
                    clearable
                    style="width:450px;margin-left:-40px"
                  ></el-input>
                </el-col>
                <el-col :span="2" :offset="5" style="margin:10px 0px 0px 260px;">所属员工</el-col>
                <el-col :span="4">
                  <el-select
                    v-model="valueYuan"
                    placeholder="请选择所属员工"
                    style="width:450px;margin-left:-40px"
                  >
                    <el-option
                      v-for="item in optionsYuan"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="tanSearchRow1">
                <el-col :span="2" :offset="1" style="margin-top:10px;">&nbsp;&nbsp;&nbsp;联系人</el-col>
                <el-col :span="4">
                  <el-input
                    v-model="inputPer"
                    placeholder="请输入联系人"
                    clearable
                    style="width:450px;margin-left:-40px"
                  ></el-input>
                </el-col>
                <el-col :span="2" :offset="5" style="margin:10px 0px 0px 260px;">手机号码</el-col>
                <el-col :span="4">
                  <el-input
                    v-model="inputTel"
                    placeholder="请输入手机号码"
                    clearable
                    style="width:450px;margin-left:-40px"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row class="tanSearchRow1">
                <el-col :span="2" :offset="1" style="margin-top:10px;">登陆账号</el-col>
                <el-col :span="4">
                  <el-input
                    v-model="inputLogin"
                    placeholder="请输入登陆账号"
                    clearable
                    style="width:450px;margin-left:-40px"
                  ></el-input>
                </el-col>
                <el-col :span="2" :offset="5" style="margin:10px 0px 0px 260px;">客户类型</el-col>
                <el-col :span="4">
                  <el-select
                    v-model="valueKe"
                    placeholder="请选择客户类型"
                    style="width:450px;margin-left:-40px"
                  >
                    <el-option
                      v-for="item in optionsKe"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
              <el-row class="tanSearchRow1">
                <el-col :span="2" :offset="1" style="margin-top:10px;">
                  默认发货
                  <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;仓库
                </el-col>
                <el-col :span="4">
                  <el-select
                    v-model="valueCang"
                    placeholder="请选择默认发货仓库"
                    style="width:450px;margin-left:-40px"
                  >
                    <el-option
                      v-for="item in optionsCang"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" :offset="5" style="margin:10px 0px 0px 260px;">所属区域</el-col>
                <el-col :span="4">
                  <el-select
                    v-model="valueQu"
                    placeholder="请选择所属区域"
                    style="width:450px;margin-left:-40px"
                  >
                    <el-option
                      v-for="item in optionsQu"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
              <div class="state">
                <span>状态</span>
                <el-radio-group v-model="radio">
                  <el-radio :label="1">已禁用</el-radio>
                  <el-radio :label="2">已启用</el-radio>
                  <el-radio :label="3">已停用</el-radio>
                </el-radio-group>
              </div>
              <div class="state">
                <span>来源</span>
                <el-radio-group v-model="radioYuan">
                  <el-radio :label="5">客户注册</el-radio>
                  <el-radio :label="6">新增导入</el-radio>
                </el-radio-group>
              </div>
              <div class="tanFooter">
                <button>确定</button>
                <button @click="tanFalse()">取消</button>
              </div>
            </div>
          </div>
          <div class="contents-table">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              class="contentsTable-table"
              @select-all="checkAll()"
              v-for="(site,key) in tableDataSmall"
              :key="key"
            >
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="url" label="客户名称/客户编号" width="170px">
                <!-- <img src="" alt=""> -->
                <span class="tableSpan1">{{site.url}}</span>
                <p class="tableP">
                  <router-link to='/customerListDetails'>
                    <span class="tableSpan2">{{site.cusName}}</span>
                    <span class="tableSpan3">{{site.cusBian}}</span>
                  </router-link>
                </p>
              </el-table-column>
              <el-table-column prop="type" label="客户类型" width="130px"></el-table-column>
              <el-table-column prop="atAdr" label="所属区域" width="90px"></el-table-column>
              <el-table-column prop="cang" label="默认发货仓库" width="105px"></el-table-column>
              <el-table-column prop="adr" label="所在地区" width="100px"></el-table-column>
              <el-table-column prop="per" label="联系人" width="70px"></el-table-column>
              <el-table-column prop="tel" label="手机" width="120px"></el-table-column>
              <el-table-column prop="login" label="登陆账号" width="110px"></el-table-column>
              <el-table-column prop="state" label="状态" width="70px"></el-table-column>
              <el-table-column prop="money" label="预存款余额" width="95px"></el-table-column>
              <el-table-column prop="cusP" label="所属员工"></el-table-column>
            </el-table>
            <div class="tanCheckAll" v-show="showCheck">
              <el-row v-for="(site,key) in tableData" :key="key">
                <el-col :span="1" @click.native="hidden()" style="cursor:pointer">X</el-col>
                <el-col :span="2">
                  已选择{{++key}}项
                  <span></span>
                </el-col>
                <el-col :span="1" :offset="1" class="shu">|</el-col>
                <el-col :span="3" class="hoverRow" @click.native="modAdr()">修改所属区域</el-col>
                <el-col :span="3" class="hoverRow" @click.native="modPer()">修改所属员工</el-col>
                <el-col :span="3" class="hoverRow" @click.native="modCang()">修改默认发货仓库</el-col>
                <el-col :span="2" class="hoverRow" @click.native="modDel()">批量删除</el-col>
                <el-col :span="2" class="hoverRow" @click.native="modStart()">启用</el-col>
                <el-col :span="2" class="hoverRow" @click.native="modStop()">禁用</el-col>
              </el-row>
              <div class="modAdr" v-show="showAdr">
                <div class="modAdr-header">
                  <h3>修改所属区域</h3>
                  <p @click="hiddenModAdr">X</p>
                </div>
                <p class="require">确定要修改莱妮化妆品有限公司等13个客户的所属区域</p>
                <span>归属区域</span>
                <el-select v-model="valueadr" placeholder="请选择" style="width:505px;">
                  <el-option
                    v-for="item in optionsadr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div class="modAdr-footer">
                  <button @click="hiddenModAdr()">取消</button>
                  <button>确定</button>
                </div>
              </div>
              <div class="modPer" v-show="showPer">
                <div class="modPer-header">
                  <h3>选择员工</h3>
                  <p @click="hiddenModPer()">X</p>
                </div>
                <input
                  type="search"
                  name
                  id
                  style="width:270px;"
                  placeholder="输入员工名称/手机号"
                  class="modPer-input"
                >
                <el-table :data="tableDataPer" style="width: 100%;" class="modPerTable">
                  <el-table-column prop="perName" label="姓名" width="180"></el-table-column>
                  <el-table-column prop="perTel" label="手机号" width="180"></el-table-column>
                  <el-table-column prop="perBu" label="部门" width="180"></el-table-column>
                  <el-table-column prop="perZhi" label="职位" width="180"></el-table-column>
                  <el-table-column prop="perZhang" label="账号状态"></el-table-column>
                </el-table>
              </div>
              <div class="modCang" v-show="showcang">
                <div class="modAdr-header">
                  <h3>修改所属区域</h3>
                  <p @click="hiddenModCang">X</p>
                </div>
                <p class="require">确定要修改莱妮化妆品有限公司等13个客户的所属区域</p>
                <span>默认发货仓库</span>
                <el-select v-model="valueadr" placeholder="请选择" style="width:505px;">
                  <el-option
                    v-for="item in optionsadr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <div class="modAdr-footer">
                  <button @click="hiddenModCang">取消</button>
                  <button>确定</button>
                </div>
              </div>
              <div class="modDel" v-show="showdel">
                <div class="modDel-header">
                  <h3>修改所属区域</h3>
                  <p @click="hiddendel">X</p>
                </div>
                <p class='model-p'>该客户的所有单据、数据均会清除且无法恢复。是否确认删除客户？</p>
                <div class="moddel-footer">
                  <button @click="hiddendel">取消</button>
                  <button>确定</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      opacity: 1,
      i: true,
      showCheck: false,
      showAdr: false,
      showPer: false,
      showcang: false,
      showdel: false,
      restaurants: [],
      state2: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      value: '',
      optionsCang: [{
        value: '选项1',
        label: '湖南仓'
      }],
      valueCang: '',
      optionsAdr: [{
        value: '选项1',
        label: '北京'
      }],
      valueT: '',
      inputCus: '',
      inputim: '',
      optionsYuan: [
        {
          value: '选项1',
          label: '加菲猫'
        }],
      valueYuan: '',
      optionsKe: [{
        value: '选项1',
        label: '一级经商'
      }],
      valueKe: '',
      optionsQu: [{
        value: '选项1',
        label: '中山区'
      }],
      valueQu: '',
      inputLogin: '',
      inputTel: '',
      inputPer: '',
      radio: '',
      radioYuan: '',
      showTan: false,
      tableData: [{
        type: '普通代理商',
        atAdr: '子区域',
        cang: '总部仓库',
        adr: '北京东城',
        per: '人人',
        tel: '15588511088',
        login: 'mendian01',
        state: '已启用',
        money: '0.00',
        cusP: '张财务'
      }],
      tableDataSmall: [{
        url: '图片',
        cusName: '广东门店',
        cusBian: '201807200002'
      }],
      multipleSelection: [],
      showTable: true,
      optionsadr: [{
        value: '选项1',
        label: '黄金糕'
      }],
      valueadr: '',
      inputper: '',
      tableDataPer: [{
        perName: '湖南押钞机',
        perTel: '15588511088',
        perBu: '下单部',
        perZhi: '法人代表',
        perZhang: '开通'
      }]
    }
  },
  methods: {
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
      // console.log(item)
    },
    search () {
      this.showTan = true
    },
    tanFalse () {
      this.showTan = false
    },
    // 全选
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    indexMethod (index) {
      return index * 2
    },
    checkAll () {
      this.showCheck = true
    },
    hidden () {
      this.showCheck = false
    },
    modAdr () {
      this.showAdr = true
    },
    hiddenModAdr () {
      this.showAdr = false
    },
    modPer () {
      this.showPer = true
    },
    hiddenModPer () {
      this.showPer = false
    },
    modCang () {
      this.showcang = true
    },
    hiddenModCang () {
      this.showcang = false
    },
    modDel () {
      this.showdel = true
    },
    hiddendel () {
      this.showdel = false
    },
    modStart () {

    },
    modStop () {

    }

  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
  .header {
    height: 45px;
    .header-nav {
      line-height: 30px;
      font-size: 12px;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
      span {
        display: inline-block;
        margin-left: 10px;
      }
      a {
        color: #999999;
      }
      a:hover {
        color: #20ade5;
      }
    }
    .header-img {
      width: 25px;
      height: 25px;
      border-radius: 5px;
      border: 1px solid #dce4e7;
    }
  }
}
.header-nav > a:last-child {
  color: #333 !important;
}
.header-nav > a:last-child:hover {
  color: #333;
}
.contents {
  width: calc(100% - 20px);
  height: 500px;
  background-color: #fff;
  padding: 10px 0px 0px 0px;
}
.contents-header {
  display: flex;
  padding-left: 20px;
}
.inline-input {
  width: 240px;
}
.inline-input /deep/ .el-input__inner::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #aab2bd;
  /* placeholder字体大小  */
  font-size: 12px;
}
.contents-select {
  width: 130px;
  margin-left: 15px;
}
.contents-select /deep/ .el-input__inner::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #aab2bd;
  /* placeholder字体大小  */
  font-size: 12px;
}
.contents-header-search {
  margin: 10px 0px 0px 15px;
  font-size: 14px;
  cursor: pointer;
}
.tanSearch {
  position: absolute;
  width: 85%;
  height: 415px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 5px #dbdddf;
  z-index: 5;
}
.router {
  margin: 10px 0px 0px 32%;
}
.router > a {
  color: #20ade5;
  margin-left: 10px;
}
.tanSearchRow1 {
  font-size: 12px;
  color: #666;
  margin-bottom: 10px;
  text-indent: 1em;
}
.tanSearch > h3 {
  font-weight: normal;
  padding: 15px 0px 0px 15px;
  color: #333;
  margin-bottom: 20px;
}
.state {
  color: #666666;
  font-size: 12px;
  padding-left: 60px;
  margin: 10px 0px;
}
.state > span {
  display: inline-block;
  margin-right: 10px;
}
.tanFooter {
  width: 96%;
  margin: 0 auto;
  border-top: 1px solid #e3e3e3;
  margin-top: 40px;
  padding-top: 15px;
}
.tanFooter > button {
  width: 100px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  margin-left: 15px;
  float: right;
  cursor: pointer;
}
.tanFooter > button:nth-child(1) {
  border: 1px solid #20ade5;
  color: #20ade5;
  background-color: #fff;
  height: 29px;
  line-height: 28px;
}
.tanFooter > button:nth-child(2) {
  background-color: #20ade5;
  color: #fff;
  border: 0;
}
.contentsTable-table {
  margin-top: 15px;
  font-size: 12px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 435px;
}
.contentsTable-table /deep/ th {
  background-color: #fcfcfc;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px slid #e3e3e3;
}
.tanTable {
  position: absolute;
  top: 110px;
  border: 1px solid;
  height: 60px;
  width: 100%;
}
.tableSpan1 {
  width: 50px;
  height: 50px;
  border: 1px solid;
  float: left;
  margin-right: 10px;
}
.tableP>a:hover {
  color:#20ade5
}
.tableSpan2 {
  display: block;
}
.tableSpan3 {
  display: block;
}
.tanCheckAll {
  width: 86%;
  height: 60px;
  position: absolute;
  top: 120px;
  background-color: #fff;
  font-size: 12px;
  color: #666666;
  line-height: 60px;
  padding-left: 20px;
}
.shu {
  font-size: 35px;
  font-weight: lighter;
  color: #e3e3e3;
}
.hoverRow:hover {
  color: #20ade5;
  cursor: pointer;
}
.modAdr {
  width: 600px;
  height: 345px;
  border: 1px solid;
  background-color: #fff;
  position: absolute;
  left: 200px;
}
.modAdr-header {
  display: flex;
  height: 50px;
  background-color: #f5f5f5;
}
.modAdr-header > h3 {
  margin-left: 40%;
  color: #333;
  font-weight: normal;
  line-height: 50px;
}
.modAdr-header > p {
  margin-left: 40%;
  color: #989898;
  line-height: 50px;
  cursor: pointer;
}
.require {
  height: 45px;
  line-height: 45px;
  background-color: #fcfcfc;
  color: #666;
  text-indent: 2em;
  border-top: 2px solid #ececec;
  border-bottom: 2px solid #ececec;
  margin-bottom: 10px;
}
.modAdr span {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}
.modAdr-footer {
  margin-top: 90px;
  border-top: 1px solid #e3e3e3;
  padding: 30px 0px 0px 430px;
  width: 170px;
}
.modAdr-footer > button {
  width: 65px;
  height: 30px;
  border-radius: 5px;
  font-size: 12px;
}
.modAdr-footer > button:nth-child(1) {
  border: 2px solid #20ade5;
  background-color: #fff;
}
.modAdr-footer > button:nth-child(2) {
  background-color: #20ade5;
  color: #fff;
  border: 0;
  margin: 0px 5px 0px 5px;
}
.modPer {
  width: 1000px;
  height: 450px;
  border: 1px solid;
  position: absolute;
  left: 40px;
  background-color: #fff;
}
.modPer-header {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #e3e3e3;
  background-color: #f5f5f5;
}
.modPer-header > h3 {
  font-weight: normal;
  margin-left: 45%;
}
.modPer-header > p {
  margin-left: 45%;
  color: #b4b4b4;
  cursor: pointer;
}
.modPer-input::placeholder {
  font-size: 12px;
}
.modPer-input {
  border: 1px solid #e3e3e3;
  height: 35px;
  margin: 10px 0px 10px 15px;
}
.modPer-input:hover {
  border-color: #20ade5;
}
.modPerTable {
}
.modPerTable /deep/ th {
  background-color: #fafafa;
  height: 20px !important;
  line-height: 20px;
  padding-left: 10px;
}
.modPerTable /deep/ .el-table__body td {
  padding-left: 10px;
}
.modCang {
  width: 600px;
  height: 345px;
  border: 1px solid;
  background-color: #fff;
  position: absolute;
  left: 200px;
}
.modCang span {
  display: inline-block;
  margin: 0px 10px 0px 10px;
}
.tanFooter {
  width: 96%;
  margin: 0 auto;
  border-top: 1px solid #e3e3e3;
  margin-top: 40px;
  padding-top: 15px;
}
.modDel {
  width: 365px;
  height: 170px;
  border: 1px solid;
  position:absolute;
  left:30%;
  background-color:#fff;
}
.moddel-footer{
  margin-top:20px;
}
.moddel-footer > button {
  width: 50px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  margin-left: 15px;
  float: right;
  cursor: pointer;
}
.moddel-footer >button:nth-child(1) {
  border: 1px solid #20ade5;
  color: #20ade5;
  background-color: #fff;
  height: 29px;
  line-height: 28px;
   border-radius: 10px;
    margin-right:10px;
}
.moddel-footer >button:nth-child(2) {
  background-color: #20ade5;
  color: #fff;
  border: 0;
   border-radius: 10px;
}
.modDel-header {
  display: flex;
  height: 50px;
  background-color: #f5f5f5;
}
.modDel-header > h3 {
  margin-left: 30%;
  color: #333;
  font-weight: normal;
  line-height: 50px;
}
.modDel-header > p {
  margin-left: 40%;
  color: #989898;
  line-height: 50px;
  cursor: pointer;
}
.model-p {
  color:#333;
  text-align:cenetr;
  padding-left:10px;
  line-height:20px;
  margin-top:15px;
}
</style>
